<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>



    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
    </style>

</head>
<body>

<div id="app">




    <el-collapse v-model="activeNames"  >
        <el-form :inline="true" :model="formInline[item.id]" v-for="(item,index) in fieldList" size="small" label-width="125px" :rules="rules[item.id]" ref="ruleForm" class="demo-form-inline">
            <el-collapse-item :title="item.group_name" :name="index"  >
                <div>
                    <el-form-item :label="field.show_name+':'" :prop="field.col_name" v-for="field in item.list" :class="field.show_name.length>7?'changeLHight':''"  >
                        <!--输入框-->
                        <el-input v-if="field.col_style == 0" :disabled="field.is_disabled" v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width" ></el-input>

                        <!--日期框-->
                        <el-date-picker v-if="field.col_style == 1" :disabled="field.is_disabled" value-format="yyyy-MM-dd"
                                        v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                                        type="date" >
                        </el-date-picker>

                        <!--时分秒日期框-->
                        <el-date-picker
                                v-if="field.col_style == 5" :disabled="field.is_disabled" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                                type="datetime" >
                        </el-date-picker>

                        <!--下拉框-->
                        <el-select :disabled="field.is_disabled"
                                   v-if="field.col_style == 6 || field.col_style == 8" filterable :style="'width:'+field.input_width"
                                   v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!--下拉框多选-->
                        <el-select :disabled="field.is_disabled" multiple
                                   v-if="field.col_style == 12 || field.col_style == 13" filterable :style="'width:'+field.input_width"
                                   v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                            <el-option value="" ></el-option>
                            <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                        </el-select>

                        <!-- 编辑器 DOM -->
                        <div v-if="field.col_style == 3" :style="'height:300px;width:'+field.input_width" >
                            <div :id="'toolbar-container-'+field.id" :style="'width:'+field.input_width" ></div>
                            <div :id="'editor-container-'+field.id" :style="'height:300px;width:'+field.input_width" ></div>
                        </div>

                        <template v-if="field.col_style == 4" >
                            <el-upload
                                    action="/admin/api/UploadController/elementUiUploadDopostFileUpload"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    multiple
                                    :data="{field:field.col_name,groupid:item.id}"
                                    :headers="headers"
                                    :file-list="uploadListShow[field.col_name]"
                                    :on-success="uploadSuccess"
                                    :on-remove="(file, fileList) => {handleRemove(file, fileList, field.col_name,field.group_id)}">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible"  >
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </template>

                        <el-input type="textarea" v-if="field.col_style == 7"
                                  :style="'width:'+field.input_width" :disabled="field.is_disabled"
                                  v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"></el-input>

                        <template v-if="field.col_style == 9" >
                            <el-radio :disabled="field.is_disabled"
                                      :style="'width:'+field.input_width"
                                      v-model="formInline[field.group_id][field.col_name]" :label="option.key" v-for="option in field.options" >{{option.value}}</el-radio>
                        </template>

                        <el-switch v-if="field.col_style == 10" :disabled="field.is_disabled"
                                   v-model="formInline[field.group_id][field.col_name]" >
                        </el-switch>

                        <el-cascader v-if="field.col_style == 11"
                                     v-model="formInline[field.group_id][field.col_name]" :props="{ checkStrictly: true }"
                                     :options="field.options" @change="handleChange(field)" ></el-cascader>
                    </el-form-item>



                </div>
            </el-collapse-item>

            <template v-if="parmsData.tableId.indexOf('627')!=-1">
                <el-collapse-item title="使用面积修改记录"   >
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                prop="fjmc"
                                label="房间名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="bz"
                                label="修改原因"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="oldv"
                                label="原始值">
                        </el-table-column>
                        <el-table-column
                                prop="newv"
                                label="现在值">
                        </el-table-column>
                        <el-table-column
                                prop="xgsj"
                                label="修改时间">
                        </el-table-column>

                        <el-table-column
                                prop="czr"
                                label="操作人">
                        </el-table-column>
                    </el-table>
                </el-collapse-item>


            </template>

            <div style="text-align: center;padding: 20px 0px;">
                <el-form-item>
                    <el-button type="primary" @click="update" v-if="parmsData.add == 'false'" >保存</el-button>
                    <el-button type="primary" @click="add" v-if="parmsData.add == 'true'" >新增</el-button>

                    <el-button type="primary" @click="f_delete" v-if="parmsData.add == 'false'" >删除</el-button>
                    <el-button type="primary" v-if="parmsData.code == '645' && parmsData.add == 'false'" @click="addRezhan">新增热站</el-button>
<!--                    <el-button type="primary" v-if="parmsData.code == '856' && parmsData.add == 'false'" @click="addXiaoqu">新增小区</el-button>-->

                    <el-button type="primary" @click="addXiaoqu" v-if="parmsData.code == '856' && parmsData.add == 'false'" >新增小区</el-button>
                    <el-button type="primary" @click="addDalou" v-if="parmsData.code == '624' && parmsData.add == 'false'" >新增大楼</el-button>

                    <el-button type="primary" @click="addDanyuan" v-if="parmsData.code == '625' && parmsData.add == 'false'" >新增单元</el-button>
                    <el-button type="primary" @click="batfangjuan" v-if="parmsData.code == '625' && parmsData.add == 'false'" >批量生成房间</el-button>

                    <el-button type="primary" @click="addFangjian" v-if="parmsData.code == '626' && parmsData.add == 'false'" >新增房间</el-button>
                    <el-button type="primary" @click="batfangjuan" v-if="parmsData.code == '626' && parmsData.add == 'false'" >批量生成房间</el-button>
                    <el-button type="primary" @click="batchInputFangjian" v-if="parmsData.code == '626' && parmsData.add == 'false'" >快速录入房间</el-button>


                    <el-button type="primary" @click="tingyong" v-if="parmsData.code == '627' && parmsData.add == 'false'" >停用</el-button>
                    <el-button type="primary" @click="history.go(-1)" v-if="parmsData.back == '1'" >返回</el-button>



                </el-form-item>
            </div>


        </el-form>
    </el-collapse>






</div>

<script>
    var E = window.wangEditor; // 全局变量
</script>
<script>




    var vm = new Vue({
        el: '#app',
        data: {
            fieldList:[],
            activeNames:[],
            headers:{token:localStorage.getItem("token")},
            uploadListShow:{},

            tableId:"",
            dialogImageUrl: '',
            dialogVisible: false,
            formInline:{},
            rules:{},
            parmsData:{},
            tableData: []
        },
        async created(){
            let mapda = getParams();
            this.parmsData = mapda;
            if(this.parmsData.tableId != undefined){
                this.tableId = this.parmsData.tableId;
            }else {
                this.tableId = top.data.tableId;
            }
            await this.getData();
            this.pageInit();
        },
        methods:{
            handleChange(field) {//三级联动下拉框改变事件 只保存最后一级
                let values = vm.formInline[field.group_id][field.col_name];
                let vstr = values[values.length-1];
                vm.formInline[field.group_id][field.col_name] = vstr;
                console.log(vm.formInline[field.group_id][field.col_name])
                return true;
            },
            batchInputFangjian(){
                let btn = {
                    btn: ['保存','取消'],
                    yes: function (index, layero){
                        var win = getTopIframe(layero);
                        let data = win.vm.saveDataBatch();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.f_layer_open_get("/admin/html/module/sichuangwuye/fangchan/batchInput.html?id="+this.parmsData.id, "92%", "85%", function () {
                }, btn, "快速录入房间")
            },
            async getData(){
                localStorage.setItem("loadDataForm", "{}");
                let resq = await queryDataForId(this.parmsData.tableId,this.parmsData.id);
                if(resq.code == 1){
                    localStorage.setItem("loadDataForm", JSON.stringify(resq.data));
                    vm.formInline = resq.data;

                    //查询面积修改记录，如果是房间
                    if(this.parmsData.tableId.indexOf("627")!=-1){
                        const res = await list("657","xgsj desc",{fjid:this.parmsData.id});
                        this.tableData = res.data;
                    }
                }
            },
            //打开批量生成房间
            batfangjuan(){
                let btn = {
                    btn: ['预览','取消'],
                    yes: function (index, layero){
                        var win = getTopIframe(layero);
                        let data = win.getData();
                        let issubmit = win.verification();
                        if (!issubmit) {
                            return false;
                        }
                        vm.saveTree(data);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                let type = "";
                if(this.parmsData.code == '625'){
                    type = "1";
                }
                if(this.parmsData.code == '626'){
                    type = '2';
                }
                top.f_layer_open_get("/admin/html/module/sichuangwuye/fangchan/bat_fangjian.html?tableId="+getTableId("675")+"&type="+type, "40%", "65%", function () {
                }, btn, "批量生成房间")
            },
            saveTree(formData){
                let type = "";
                if(this.parmsData.code == '625'){
                    type = "1";
                }
                if(this.parmsData.code == '626'){
                    type = '2';
                }
                let btn = {
                    btn: ['保存','取消'],
                    yes: async function (index, layero){
                        let values = Object.values(formData);
                        let pdata =  {};
                        copy(values[0],pdata);
                        copy(values[1],pdata);
                        copy(values[2],pdata);
                        let i = top.load();
                        const response = await postWebCustom("sichuangwuye-677",{formData:JSON.stringify(pdata),type:type,"nodeId":vm.parmsData.id});
                        top.layer.close(i);
                        top.alert(response.msg);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };

                top.f_layer_open_get("/admin/html/module/sichuangwuye/fangchan/fangjianyulan_tree.html?type="+type, "40%", "65%", function () {
                }, btn, "房间预览",formData);
            },
            async tzlocal(code){
                const res = await postWebCustom(getTableId("649"),{"tableId":getTableId(code)});
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                let tableId = res.data.keycode+"-"+code;
                let groupid = Object.keys(vm.formInline)[0];
                let pid = vm.formInline[groupid].id;
                window.location.href = "/admin/html/module/sichuangwuye/fangchan/input.html?add=true&pid="+pid+"&back=1&code="+code+"&id=-1&tableId="+tableId+"&input_id="+res.data.id;
            },
            //停用
            async tingyong(){
              const res = await updateData("627",{"id":this.parmsData.id,"fjzt":"4"});
              top.alert(res.msg);
            },
            async f_delete(){
                this.$confirm('此操作将删除以下所有子项目、欠费记录、收款记录、收费标准定义等, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let i = top.layer.load();
                    const res = await deleteData(this.parmsData.tableId,this.parmsData.id,{});
                    top.layer.close(i);
                    top.alert(res.msg);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            //新增
            async add(){
                if(!verification()){
                    return;
                }
                let groupid = Object.keys(vm.formInline)[0];
                if(this.parmsData.pid != undefined){
                    vm.formInline[groupid].pid = this.parmsData.pid;
                }
                let i = top.layer.load();
                const res = await addMapdata(this.parmsData.tableId,vm.formInline);
                top.layer.close(i);
                top.alert(res.msg);
            },
            //新增热站
            async addRezhan(){
                let code = "856";
                this.tzlocal(code);
            },
            //新增小区
            async addXiaoqu(){
                let code = "624";
                this.tzlocal(code);
            },
            //新增大楼
            async addDalou(){
                let code = "625";
                this.tzlocal(code);
            },
            //新增单元楼
            async addDanyuan(){
                let code = "626";
                this.tzlocal(code);
            },
            //新增房间
            async addFangjian(){
                let code = "627";
                this.tzlocal(code);
            },
            async update(){
                if(!verification()){
                    return;
                }
                let loadDataForm = JSON.parse(localStorage.getItem("loadDataForm"));
                let mapold = Object.values(loadDataForm)[0];
                let mapnew = Object.values(this.formInline)[0];
                if(this.parmsData.tableId.indexOf("627")!=-1 && mapold.jzmj!=mapnew.jzmj){
                    this.$prompt('建筑面积被修改，请输入修改原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(async ({ value }) => {
                        if(value == "" || value == null){
                            top.alert("请输入修改原因");
                            return false;
                        }
                        let i = top.layer.load();
                        const res = await addMapdata("657",{"fjinfo":JSON.stringify(mapold),"fjnewinfo":JSON.stringify(mapnew),"bz":value});
                        top.layer.close(i);
                        top.alert(res.msg);
                        this.getData();

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                }else {
                    let i = top.layer.load();
                    const res = await updateMapdata(this.parmsData.tableId,vm.formInline);
                    top.layer.close(i);
                    top.alert(res.msg);
                }
            },
            pageInit(){
                console.log(this.parmsData)
                post("/admin/api/FieldManagementController/enterCustomFieldQuery",{inputId:this.parmsData.input_id,tableId:this.parmsData.tableId},function (res){
                    vm.fieldList = res.data.fieldList;
                    let ic = Object.keys(vm.formInline).length;
                    if(Object.keys(vm.formInline).length == 0){
                        vm.formInline = res.data.formData;
                    }
                    vm.rules = res.data.roles;
                    vm.$nextTick(()=>{
                        for(let a=0;a<vm.fieldList.length;a++){
                            vm.activeNames.push(a);
                            if(ic > 0){//对当前页面图片字段进行渲染
                                let columnlist = vm.fieldList[a].list;
                                for(let i=0;i<columnlist.length;i++){
                                    if(columnlist[i].col_style == "4"){
                                        let groupid = vm.fieldList[a].id;
                                        let src = vm.formInline[groupid][columnlist[i].col_name];
                                        vm.fileListTransi(src,columnlist[i].col_name);
                                    }
                                }
                            }

                            // 创建富文本编辑器
                            let columnlist = vm.fieldList[a].list;
                            for(let i=0;i<columnlist.length;i++){
                                if(columnlist[i].col_style == "3"){
                                    // 创建编辑器1
                                    let editor1 = E.createEditor({
                                        selector: '#editor-container-'+columnlist[i].id,
                                        html:vm.formInline[vm.fieldList[a].id][columnlist[i].col_name],
                                        mode: 'default',
                                        config:{
                                            onChange(editor){//文本编辑器的改变事件
                                                const html = editor.getHtml();
                                                let groupid = vm.fieldList[a].id;
                                                vm.formInline[groupid][columnlist[i].col_name] = html;
                                            },
                                            MENU_CONF:{uploadImage:{
                                                    "server":'/admin/api/UploadController/systemDopostFileUpload',
                                                    "headers":{token:localStorage.getItem("token")},
                                                    fieldName:"file",
                                                    // 自定义插入图片
                                                    customInsert(res, insertFn) {
                                                        // res 即服务端的返回结果
                                                        console.log(res);
                                                        // 从 res 中找到 url alt href ，然后插图图片
                                                        insertFn(res.data.url, "","");
                                                    },
                                                }}

                                        }
                                    })

                                    // 创建工具栏1
                                    E.createToolbar({
                                        editor: editor1,
                                        selector: '#toolbar-container-'+columnlist[i].id,
                                        mode: 'default'
                                    })


                                }
                            }

                        }
                    })

                });
            },
            uploadSuccess(response, file, fileList){
                let groupid = response.data.groupid;
                let field = response.data.field;
                if(vm.formInline[groupid][field] == undefined || vm.formInline[groupid][field] == ""){
                    vm.formInline[groupid][field] = response.data.src;
                    // Vue.set(vm.formInline,response.data.field,response.data.src);
                }else {
                    vm.formInline[groupid][field] = vm.formInline[groupid][field]+","+response.data.src;
                    // Vue.set(vm.formInline,response.data.field,vm.formInline[response.data.field]+","+response.data.src)
                }
            },
            fileListTransi(src,field){
                if(src==null || src==undefined|| src == ""){
                    return ;
                }
                let urls = src.split(",");
                let fileList = [];
                for(let a=0;a<urls.length;a++){
                    fileList.push({name:"",url:urls[a]});
                }
                Vue.set(vm.uploadListShow,field,fileList);
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file,fileList,field,zygl_id) {
                let urls = "";
                for(let a=0;a<fileList.length;a++){
                    console.log(fileList[a])
                    let url = fileList[a].url;
                    if(a == 0){
                        urls = url;
                    }else {
                        urls = urls+","+url;
                    }
                }
                console.log(vm.formInline);
                console.log(zygl_id);
                console.log(field);
                vm.formInline[zygl_id][field] = urls;
            },
            submitForm(formName,index) {
                try {
                    vm.$refs[formName][index].validate((valid) => {
                        if (valid) {
                            return true;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }catch (e){}

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            changePost:throttle(async function (){
                const res = await postBody("/admin/api/DataManagementController/inputBoxChangeEvent",{tableId:this.tableId,mapdata:{"oldValue":top.data.oldValue,"newValue":top.data.newValue},other:{fieldList:vm.fieldList,rules:vm.rules,other:top.data.other,changeColumn:top.data.changeColumn}});
                if(res.code == 1){
                    vm.fieldList = res.data.other.fieldList;
                    vm.formInline = res.data.mapdata.newValue;
                    vm.rules = res.data.other.rules;

                    //循环列表编辑的数据
                    /*let iframes = $("[fr=gridList]");
                    for(let a=0;a<iframes.length;a++){
                        let src = $(iframes[a]).attr("src");
                        $(iframes[a]).attr("src",src);
                    }*/


                    //循环列表重新加载数据
                    for(let a=0;a<vm.fieldList.length;a++){
                        let listcol = vm.fieldList[a].list;
                        for(let i=0;i<listcol.length;i++){
                            if(listcol[i].col_style == "14"){
                                let src = $("[name="+listcol[i].col_name+"]").attr("src");
                                $("[name="+listcol[i].col_name+"]").attr("src",src);
                            }
                        }
                    }
                }
            }, 800)
        },
        computed: {
            formInlineFun() {
                return JSON.parse(JSON.stringify(this.formInline));
            },
        },
        watch:{
            formInlineFun:{
                async handler (newValue, oldValue) {
                    let isdif = diff(newValue,oldValue);
                    if(isdif){
                        return;
                    }
                    if(Object.keys(oldValue).length == 0){
                        return;
                    }
                    top.data.oldValue = oldValue;
                    top.data.newValue = newValue;
                    this.changePost();
                    return;
                },
                deep: true
            }
        }
    })


    //验证必填项
    function verification() {
        let a = 0;
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            try {
                vm.submitForm("ruleForm",a);
                a++;
            }catch (e){}
        }
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            for(let key in map){
                try {
                    let value = map[key];
                    if(vm.rules[zygl][key] != undefined && value == ""){
                        top.alert("红*号必输项不能为空!");
                        return false;
                    }
                }catch (e){}
            }

        }
        return true;
    }

    function getData() {
        console.log(vm.formInline)
        return vm.formInline;
    }


    function setData(data) {
        if(Object.keys(data).length > 0){
            vm.formInline = data;
        }

    }
</script>


</body>
</html>
